<script lang="ts" setup>
const { search, setCurrentTitle } = useSearch()
const {  currentTitle } =storeToRefs(useSearch()) 
import uniNavBar from '@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue';
// 搜索框初始变量
const value = ref(currentTitle.value)

// 搜索按钮
function onSearch() {
  setCurrentTitle(value.value)
  search(value.value)
}

// 返回的按钮
function onClickLeft() {
  uni.navigateBack()
}
</script>

<template>
  <uni-nav-bar :fixed="true" :border="false" :status-bar="true" left-icon="left" left-width="45rpx" right-width="80rpx"
    background-color="#ffffff" @click-left="onClickLeft">
    <view flex items-center w-full h-full relative m-0 p-0>
      <image src="@/static/images/icons/index/search_top.svg" class="w-16 h-6 top-35 left-25" />
      <image src="@/static/images/icons/index/search.svg" class="w-32 h-28 left-20" />
      <input v-model="value" bg="#f6f6f6" placeholder="请输入搜索内容" text="24 #999999" class="h-60 w-full rounded pr-3 pl-8"
        placeholder-class="input-placeholder" @confirm="onSearch">
    </view>
    <template #left />
    <template #right>
      <text text="30 #555555 center" w-full @click="onSearch">
        搜索
      </text>
    </template>
  </uni-nav-bar>
</template>

<style lang="scss" scoped>
image {
  position: absolute;
}
</style>
